---
title: Drawer
description: Used to render a content that slides in from the side of the screen.
links:
  source: components/drawer
  storybook: components-drawer--basic
  recipe: drawer
  ark: https://ark-ui.com/react/docs/components/dialog
---

<ExampleTabs name="drawer-basic" />

## Anatomy

```jsx
import { Drawer } from '@saas-ui/react/drawer'
```

```jsx
<Drawer.Root>
  <Drawer.Backdrop />
  <Drawer.Trigger />
  <Drawer.Content>
    <Drawer.Header>
      <Drawer.Title />
      <Drawer.CloseButton />
    </Drawer.Header>
    <Drawer.Body />
    <Drawer.Footer>
      <Drawer.CloseTrigger asChild>
        <Button>Close</Button>
      </Drawer.CloseTrigger>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>
```

## Examples

### Attached

Use the `attached` prop to render the drawer to attach to the edge of the viewport.

<ExampleTabs name="drawer-attached" />

### Sizes

Use the `size` prop to change the size of the drawer component.

<ExampleTabs name="drawer-with-sizes" />

### Offset

Pass the `offset` prop to the `DrawerContent` to change the offset of the drawer
component.

<ExampleTabs name="drawer-with-offset" />

### Placement

Use the `placement` prop to change the placement of the drawer component.

<ExampleTabs name="drawer-with-placement" />

### Initial Focus

Use the `initialFocusEl` prop to set the initial focus of the drawer component.

<ExampleTabs name="drawer-with-initial-focus" />

## Props

### Root

<PropTable component="Drawer" part="Root" />
